<script setup lang="ts">
import Banner from "./components/Banner.vue";
import TotalOrderVolume from "./components/TotalOrderVolume.vue";
import TotalProducts from "./components/TotalProducts.vue";
import SalesTrend from "./components/SalesTrend.vue";
import SalesClassification from "./components/SalesClassification.vue";
import TransactionList from "./components/TransactionList.vue";
import HotCommodity from "./components/HotCommodity.vue";
import RecentTransaction from "./components/RecentTransaction.vue";
import AnnualSales from "./components/AnnualSales.vue";
import ProductSales from "./components/ProductSales.vue";
import SalesGrowth from "./components/SalesGrowth.vue";
import CartConversionRate from "./components/CartConversionRate.vue";
import HotProductsList from "./components/HotProductsList.vue";

defineOptions({ name: "ECommerce" });
</script>

<template>
  <div class="e-commerce">
    <el-row :gutter="20">
      <el-col :sm="24" :md="24" :lg="16">
        <Banner />
      </el-col>
      <el-col :sm="12" :md="12" :lg="4">
        <TotalOrderVolume />
      </el-col>
      <el-col :sm="12" :md="12" :lg="4">
        <TotalProducts />
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :sm="12" :md="12" :lg="8">
        <SalesTrend />
      </el-col>
      <el-col :sm="12" :md="12" :lg="8">
        <SalesClassification />
      </el-col>
      <el-col :sm="24" :md="24" :lg="8">
        <el-row :gutter="20">
          <el-col :sm="24" :md="12" :lg="12">
            <ProductSales />
          </el-col>
          <el-col :sm="24" :md="12" :lg="12">
            <SalesGrowth />
          </el-col>
          <el-col :span="24" class="no-margin-bottom">
            <CartConversionRate />
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :sm="24" :md="12" :lg="8">
        <HotCommodity />
      </el-col>
      <el-col :sm="24" :md="12" :lg="8">
        <AnnualSales />
      </el-col>
      <el-col :sm="24" :md="24" :lg="8">
        <TransactionList />
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :md="24" :lg="8">
        <RecentTransaction />
      </el-col>
      <el-col :md="24" :lg="16" class="no-margin-bottom">
        <HotProductsList />
      </el-col>
    </el-row>
  </div>
</template>

<style lang="scss" scoped>
@use "./index";
</style>
